<template>


  <div style="background-color: dimgrey;height: 100%;">
    <el-container style="padding: 0;margin: 0;position: relative;width: 100%;height: 100%">
      <!--      头部-->
      <el-header height="60px" class="header">
        <Header></Header>
      </el-header>
      <el-container >
        <!--        左侧边栏-->
        <el-aside width="200px" class="aside-left" v-if="getTaskListViewSwitch">
          <TaskListView></TaskListView>
        </el-aside>
        <!--        地图主栏目-->
        <el-main class="main-map " style="padding: 0">
          <RPointEditDialog></RPointEditDialog>
          <TrackInfoDialog></TrackInfoDialog>
          <UserInfoDialog></UserInfoDialog>
          <div style=" height: 100%;
                        width: 100%;
                        padding: 0;
                        margin: 0;">
            <div id="container" style="padding:0;margin: 0">
              <div v-if="this.store.state.logVisible" style="opacity:0.6;z-index:999;background:black;height: 200px;width: 300px;position: absolute;bottom:10px;right:10px;" >
                <div style="display: flex">
                  <el-icon color="#ffffff" :size="20" style="margin: 10px">
                    <BellFilled></BellFilled>
                  </el-icon>
                  <div style="float: right;color: white;font-size: small"><p>日志信息</p></div>
                </div>
                <hr style="margin: 0;padding: 0">
                <el-scrollbar height="200px">
<!--                  <p v-for="item in ['2022/10/07-12:32:无人机连接成功','2022/10/07-12:37:检测到漂浮物','2022/10/07-12:32:无人机连接中断','2022/10/07-12:32:无人机尝试重连...']" -->
<!--                     :key="item" class="scrollbar-demo-item">{{ item }}</p>-->
                  <p v-for="item in this.store.state.logInfoArray"
                     :key="item" class="scrollbar-demo-item">{{ item }}</p>
                </el-scrollbar>
              </div>
            </div>


          </div>

        </el-main>
        <!--        右侧边栏-->
        <el-aside  v-if="getRightAsideSwitch" class="aside-right" width="300px" >
          <RightAside v-if="this.store.state.rightAsideEditorSwitch"></RightAside>
          <ControllerPanel v-if="this.store.state.rightAsideControllerSwitch"></ControllerPanel>
        </el-aside>
      </el-container>
      <!--      底部栏目-->
      <el-footer class="footer" height="60px" >
        <Footer></Footer>
      </el-footer>
    </el-container>


  </div>

</template>

<style>

</style>
<script>
import AMapLoader from "@amap/amap-jsapi-loader"
import TaskListView from "@/components/TaskListView";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import RightAside from "@/components/RightAside";
import RPointEditDialog from "@/components/RPointEditDialog";
import ControllerPanel from "@/components/ControllerPanel";
// import store from './store'
import request from "@/utils/request";
import TrackInfoDialog from "@/components/TrackInfoDialog";
import UserInfoDialog from "@/components/UserInfoDialog";
import {BellFilled} from '@element-plus/icons-vue'
export default {
  components: {
    BellFilled,
    UserInfoDialog,
    TrackInfoDialog, ControllerPanel, RPointEditDialog, RightAside,TaskListView, Footer,Header},
  data() {
    return {
      timeout:0,
      currentLocation:{},//无人机的当前位置
      marker: {},//无人机目前的标记
      left_aside_show:true,
      store: this.$store,
      mouseTool:{},
      polyEditor:{},
      markers:[]
    };
  },
  created() {
    this.getAircrafts();
    //this.getFlightTasks();
  },
  unmounted() {
    window.clearTimeout(this.timeout)
    console.log("MainLayout销毁")
  },
  mounted() {
    console.log(sessionStorage.getItem('user'));
    this.initMap();
  },
  watch:{
    // currentLocation(){
    //   this.$nextTick(()=>{
    //     console.log("mount"+this.currentLocation.longitude)
    //     this.initMap()
    //   })
    // }
    // currentLocation(){
    //   //console.log("mount"+this.currentLocation.longitude)
    //   this.initMap()
    // }
  },
  computed:{
    getRightAsideSwitch:function (){
      return this.store.getters.getRightAsideSwitch;
    },
    getTaskListViewSwitch:function (){
      return this.store.getters.getTaskListViewSwitch;
    }
  },
  methods: {
    getAircrafts(){
      //获取所有无人机
      request.get("/aircraftman/aircraft").
      then(res=>{
        if(res) {
          this.store.commit('updateAircraft', res.data);
        }else {
          console.log("请求无人机资源失败");
        }
        this.timeout = setTimeout(()=>{
          this.getAircrafts();
        },2000);
      });
    },
    initMap() {
      AMapLoader.load({
        key:"919924614a84aac3ebb5fcbef79c4d43",
        version:"2.0",
        plugins:['AMap.MapType','AMap.MouseTool','AMap.PolylineEditor','AMap.CitySearch','AMap.Geocoder','AMap.MoveAnimation']
      }).then((AMap)=>{
        let map = new AMap.Map('container', {
          resizeEnable: true, //是否监控地图容器尺寸变化
          zoom: 15, //初始化地图层级
          layers:[
            AMap.createDefaultLayer(),
            // 卫星
            new AMap.TileLayer.Satellite(),
            // 路网
            new AMap.TileLayer.RoadNet()
          ],
          // center: [114.360734, 30.541093]//初始化地图中心点
        });
        // var position = new AMap.LngLat(114.360734, 30.541093);
        // this.marker = new AMap.Marker({
        //   position: position,//位置
        //   icon: '//vdata.amap.com/icons/b18/1/2.png'
        // })
        // map.add(this.marker);//添加到地图

        map.addControl(new AMap.MapType());

        // let path = [
        //   [114.556157,30.488123],
        //   [114.556217,30.488038],
        //   [114.556234,30.487942],
        //   [114.556247,30.487873],
        //   [114.556285,30.487816],
        //   [114.556308,30.487762],
        //   [114.556317,30.487696],
        //   [114.556330,30.487630],
        //   [114.556355,30.487561],
        //   [114.556367,30.487496],
        //   [114.556363,30.487386],
        //     [114.556360,30.487355],
        //     [114.556362,30.487492],
        //     [114.556378,30.487585],
        //     [114.556386,30.487678],
        //     [114.556356,30.487795],
        //     [114.556293,30.487925],
        //     [114.556286,30.487961],
        //   [114.556244,30.488031],
        //     [114.556168,30.488163]
        // ];
        // let polyline2 = new AMap.Polyline({
        //   path: path,
        //   isOutline: true,
        //   outlineColor: '#ffeeff',
        //   borderWeight: 1,
        //   strokeColor: "#3366FF",
        //   strokeOpacity: 1,
        //   strokeWeight: 2,
        //   // 折线样式还支持 'dashed'
        //   strokeStyle: "solid",
        //   // strokeStyle是dashed时有效
        //   strokeDasharray: [10, 5],
        //   lineJoin: 'round',
        //   lineCap: 'round',
        //   zIndex: 50,
        // })
        // map.add(polyline2);

        // const animationMarker = new AMap.Marker({
        //   position: new AMap.LngLat(114.363389,30.549466),
        //   icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
        //   offset: new AMap.Pixel(-13, -26),
        // });
        // map.add(animationMarker);
        // // 调用 moveTo 方法
        // animationMarker.moveTo([114.368389, 30.54409466], {
        //   duration: 6000,
        //   delay: 5000,
        // });


        //采样信息
        let trackInfoPath = new AMap.Polyline({
          strokeColor: "#3366FF", //线颜色
          strokeWeight: 2,        //线宽
          strokeStyle: "solid",   //线样式
        });
        this.store.commit('createTrackInfoPath',trackInfoPath);
        let trackInfoPL = this.store.getters.getTrackInfoPath;
        map.add(trackInfoPL);
        //

        let polyline = new AMap.Polyline({//设置线覆盖物路径
          strokeColor: "#3366FF", //线颜色
          strokeWeight: 6,        //线宽
          strokeStyle: "solid",   //线样式
          showDir:true
        });
        this.store.commit('createPolyline',polyline);
        //map.add(polyline);

        this.store.commit('setAMap',AMap);
        this.store.commit('setMap',map);
        this.store.commit('createMouseTool',{AMap:AMap,map:map});
        this.mouseTool = this.store.getters.getMouseTool;
        // this.store.commit('mouseToolDraw',AMap);
        this.store.commit('createPolyEditor',{AMap:AMap,map:map});
        this.polyEditor = this.store.getters.getPolyEditor;

        //航线划完结束时调用
        //使用箭头函数时this是组件，用普通函数this指向事件
        this.mouseTool.on('draw',e=>{
          console.log('draw')
          map.add(polyline);
          polyline.setPath(e.obj.getPath());
          this.store.commit('updateCurrentPath',e.obj.getPath());
          console.log(polyline);
          this.polyEditor.setTarget(polyline);
          this.mouseTool.close(true);//关闭
          //this.store.commit('closeMouseToolAndClear')
          this.polyEditor.open();

        });
        this.polyEditor.on('adjust', (e)=>{
          //console.log("adjust")
          this.store.commit('updateCurrentPath',e.target.getPath());
        });
        this.polyEditor.on('addnode',(e)=>{
          //console.log("adjust")
          this.store.commit('updateCurrentPath',e.target.getPath());
        });
        this.polyEditor.on('removenode',(e)=>{
          //console.log("adjust")
          this.store.commit('updateCurrentPath',e.target.getPath());
        });
        this.polyEditor.on('end',(e)=>{
          map.add(polyline);
          let clearMarks = map.getAllOverlays('marker');
          map.remove(clearMarks);
          this.markers=[];
          this.store.commit('updateCurrentPath',e.target.getPath());
          let tempPath = e.target.getPath();
          let pointsNum = tempPath.length;
          for(let i=0;i<pointsNum;i++){
            let marker = new AMap.Marker({position:tempPath[i]});
            if(i===0){
              marker.setIcon(new AMap.Icon({
                size: new AMap.Size(19, 31),//图标大小
                imageSize: new AMap.Size(19, 31),
                image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png"
              }));
            }else if(i===pointsNum-1){
              marker.setIcon(new AMap.Icon({
                size: new AMap.Size(19, 31),//图标大小
                imageSize: new AMap.Size(19, 31),
                image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png"
              }));
            }else {
              marker.setIcon(new AMap.Icon({
                size: new AMap.Size(19, 31),//图标大小
                imageSize: new AMap.Size(19, 31),
                image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png"
              }));
            }
            marker.extData = i;
            marker.on('click',e=>{
              this.store.commit('rPointEditDialogOnAndOff',true);
              this.store.commit('setCurrentRPointIndex',e.target.extData);
            });
            this.markers.push(marker);
          }
          //console.log(this.markers.length);
          map.add(this.markers);
        });

        var geocoder = new AMap.Geocoder({});
        this.store.commit('setGeocoder',geocoder);
      });//Amap定义 end
      // })

    }//initMap end
  }
}
</script>
<style>
.scrollbar-demo-item {
  display: flex;
  /*align-items: center;*/
  /*justify-content: center;*/
  height: 20px;
  margin: 5px;
  font-size: small;
  text-align: left;
  border-radius: 4px;
  background: black;
  color: white;
}
#container{
  /*position: relative;*/
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.header{
  background-color: black;
  color: azure;
  padding: 0;
  margin: 0;
  /*display: inline-block;*/
}
.aside-left{
  background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.25) 200%);
  background-blend-mode: multiply;
  padding: 0;
  margin: 0;
  color: azure;
  position: relative;
}
.main-map{
  /*--el-main-padding: 0;*/
  padding: 0;
  margin: 0;
}
.aside-right{
  background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.25) 200%);
  background-blend-mode: multiply;
  padding: 0;
  margin: 0;
  color: white;

}

.footer{
  background-color: #000000;
  color: aliceblue;
  padding: 0;
  margin: 0;
}


</style>